<template>
    <div>
        <el-form :model="form" ref="form" :rules="rules">

            <el-form-item label="权限名称" :label-width="formLabelWidth" prop="authName">
                <el-input v-model="form.authName"></el-input>
            </el-form-item>

            <el-form-item label="所属角色" :label-width="formLabelWidth" prop="role">
                <xy-role-select v-model="form.role" :hideOptions="['ADMIN']" :disabled="isEdit"></xy-role-select>
            </el-form-item>

            <el-form-item label="是否可用" prop="enabled" :label-width="formLabelWidth">
                <el-switch
                    v-model="form.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </el-form-item>

            <el-form-item label="描述信息" prop="descr" :label-width="formLabelWidth">
                <el-input type="textarea" :rows="4" v-model.trim="form.descr"></el-input>
            </el-form-item>

        </el-form>
        <div style="text-align: right">
            &emsp;&emsp;&emsp;&nbsp;&nbsp;
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button :disabled="isEdit" @click="resetForm">重置</el-button>
        </div>
    </div>
</template>

<script>

    import xyRoleSelect from '../user_info/select/RoleSelect.vue';

    export default {
        mounted() {
            this.loadData();
        },
        components: {
            xyRoleSelect,
        },
        props: {
            version: undefined,
            method: { //如果添加，就用post，修改就用put
                required: true
            },
            id: {       //要更新的权限id
                type: Number,
            }
        },
        computed: {
            isEdit: function () {
                return this.method !== 'POST'; //如果是【修改操作】则返回 false
            }
        },
        data() {
            return {

                form: {
                    id: null,
                    authName: '',
                    enabled: true,
                    role: null,
                    descr: '',
                },
                rules: {
                    authName: [
                        {required: true, message: '必填', trigger: 'blur'},
                        {min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur'}
                    ],
                    role: [
                        {required: true, message: '必填', trigger: 'blur'},
                        {min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur'},
                        {validator: this.verify.isUserName, trigger: 'blur'}
                    ],
                },
                formLabelWidth: '120px',
            };
        },
        methods: {
            onSubmit: function () {
                if (this.form.role === 'ADMIN') {
                    this.$message.warning("禁止创建管理员用户");
                    return;
                }
                let verify = true;
                this.$refs.form.validate((valid, obj) => {
                    if (obj && Object.getOwnPropertyNames(obj).length > 1) {
                        verify = false;
                    } else {
                        verify = valid && verify;
                    }
                });
                if (!verify) {
                    return;
                }
                let _this = this;
                this.$ajax.request({
                    url: 'auth/role_view/dml',
                    method: _this.method,
                    data: this.form
                }).then(res => {
                    if (res.code !== "ok") {
                        _this.$message.error(res.msg);
                    } else {
                        _this.$emit('submitSuccess', res, _this.method); //添加成功
                    }
                });

            },
            /**
             * 数据加载
             * @param id
             */
            loadData: function (id) {
                if (this.method === 'POST') {
                    this.resetForm();
                    return;
                }
                let _this = this;
                if (!id && !_this.id) {
                    return;
                }

                id = id || _this.id;
                this.$ajax.get('auth/role_view/dml/'+id).then(res => {
                    _this.form = res.data;
                })
            },
            resetForm() {
                this.$refs.form.resetFields();
                this.$refs.form.clearValidate();
            }
        },
        watch : {
            version() {
                this.loadData();
            }
        }
    }
</script>

<style scoped="scoped">

</style>
